<template>
  <div class="teacher-home">
    <AppNavbar title="教师首页" role="teacher" />
    
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎回来，{{ username }} 老师</h1>
      <p class="welcome-subtitle">在这里管理您的课程和学生成绩</p>
    </div>
    
    <el-card class="teacher-functions">
      <template #header>
        <div class="card-header">
          <span>教学功能</span>
        </div>
      </template>
      <el-row :gutter="20" justify="center">
        <el-col :span="8">
          <div class="function-card" @click="goToStudentGrades">
            <div class="function-icon bg-blue">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="function-content">
              <h3 class="function-title">学生成绩</h3>
              <p class="function-desc">查看和管理学生成绩</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="function-card" @click="goToCreateSubject">
            <div class="function-icon bg-green">
              <i class="el-icon-plus"></i>
            </div>
            <div class="function-content">
              <h3 class="function-title">创建科目</h3>
              <p class="function-desc">创建新的考试科目</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="function-card" @click="goToSubjectList">
            <div class="function-icon bg-purple">
              <i class="el-icon-document"></i>
            </div>
            <div class="function-content">
              <h3 class="function-title">科目列表</h3>
              <p class="function-desc">管理已有考试科目</p>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" justify="center" style="margin-top: 20px;">
        <el-col :span="8">
          <div class="function-card" @click="goToImportQuestionsManual">
            <div class="function-icon bg-orange">
              <i class="el-icon-edit"></i>
            </div>
            <div class="function-content">
              <h3 class="function-title">手动导入题目</h3>
              <p class="function-desc">手动添加考试题目</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="function-card" @click="goToImportQuestionsExcel">
            <div class="function-icon bg-cyan">
              <i class="el-icon-upload"></i>
            </div>
            <div class="function-content">
              <h3 class="function-title">Excel导入题目</h3>
              <p class="function-desc">通过Excel批量导入题目</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import AppNavbar from '@/components/AppNavbar.vue'

export default {
  name: 'TeacherIndex',
  components: {
    AppNavbar
  },
  data() {
    return {
      username: ''
    }
  },
  created() {
    // 从localStorage获取用户信息
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      try {
        const user = JSON.parse(userInfo)
        this.username = user.username
      } catch (e) {
        console.error('解析用户信息失败:', e)
      }
    }
  },
  methods: {
    goToStudentGrades() {
      this.$router.push('/teacher/student-grades')
    },
    
    goToCreateSubject() {
      this.$router.push('/teacher/create-subject')
    },
    
    goToSubjectList() {
      this.$router.push('/teacher/subjects')
    },
    
    goToImportQuestionsManual() {
      this.$router.push('/teacher/import-questions-manual')
    },
    
    goToImportQuestionsExcel() {
      this.$router.push('/teacher/import-questions-excel')
    }
  }
}
</script>

<style scoped>
.teacher-home {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 40px);
}

.welcome-section {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
}

.welcome-title {
  color: #333;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.welcome-subtitle {
  color: #666;
  font-size: 1.1rem;
}

.teacher-functions {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: none;
}

.card-header {
  font-size: 1.3rem;
  font-weight: 500;
  color: #333;
  padding: 20px;
}

.function-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  margin-bottom: 20px;
}

.function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.function-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: #fff;
  font-size: 22px;
}

.bg-blue {
  background: #409eff;
}

.bg-green {
  background: #67c23a;
}

.bg-purple {
  background: #926dde;
}

.bg-orange {
  background: #e6a23c;
}

.bg-cyan {
  background: #1fbfcf;
}

.function-content {
  flex: 1;
}

.function-title {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}

.function-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 768px) {
  .el-col {
    margin-bottom: 20px;
  }
  
  .function-card {
    margin-bottom: 0;
  }
}
</style>